<template>
  <div class="home" ref="home" v-loading="isLoading">
    <div
      class="homeShow-slide"
      :style="{ transform: `translateY(${marginMoveDistance})` }"
      @transitionend="moveEnd"
      @wheel="wheelEvent"
    >
      <HomeShow
        v-for="item in data"
        :key="item.id"
        :homeShowObject="item"
      ></HomeShow>
    </div>
    <div
      v-show="pageIndex < data.length - 1"
      @click="switchToPage(pageIndex + 1)"
    >
      <Icon type="arrowUp" class="homw-arrowUp"></Icon>
    </div>
    <div v-show="pageIndex >= 1" @click="switchToPage(pageIndex - 1)">
      <Icon type="arrowDown" class="home-arrowDown"></Icon>
    </div>
    <div class="home-pageNum-container">
      <span
        v-for="(item, i) in data"
        :key="item.id"
        @click="switchToPage(i)"
        :class="{ 'pageNum-active': i == pageIndex }"
      ></span>
    </div>
  </div>
</template>

<script>
import HomeShow from "./HomeShow";
import Icon from "@/components/Icon";
export default {
  data() {
    return {
      isMove: false,
      pageHeight: 0,
      pageIndex: 0, //当前显示页面
    };
  },
  computed: {
    marginMoveDistance() {
      return -this.pageHeight * this.pageIndex + "px";
    },
    isLoading(){// 获取仓库的全局配置banner
      return this.$store.state.banner.loading;
    },
    data(){
      return this.$store.state.banner.data;
    }
  },
  created(){
    this.$store.dispatch("banner/fetchBanner");
  },
  mounted() {
    //获取窗口高度
    this.pageHeight = this.$refs.home.clientHeight;
    //实时获取窗口宽度，以保证正确的pageHeight
    window.addEventListener('resize',this.rePageHeight);
  },
  destroyed(){
    //保证只能在home页面获取实时高度
    window.removeEventListener('resize',this.rePageHeight);
  },
  methods: {
    switchToPage(pageIndex) {
      if (!this.isMove) {
        this.isMove = true;
        this.pageIndex = pageIndex;
      }
    },
    moveEnd() {
      this.isMove = false;
    },
    wheelEvent(e) {
      //滑轮事件
      if (e.deltaY > 0 && this.pageIndex < this.data.length - 1) {
        this.switchToPage(this.pageIndex + 1);
      }
      else if (e.deltaY < 0 && this.pageIndex >=  1) {
        this.switchToPage(this.pageIndex - 1);
      }
    },
    rePageHeight(){
      this.pageHeight = this.$refs.home.clientHeight;
    }
  },
  components: {
    HomeShow,
    Icon,
  },
};
</script>

<style scoped lang='less'>

.home {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.home {
  position: relative;
  .homeShow-slide {
    height: 100%;
    transition: 0.5s;
  }
  .icon-container {
    position: absolute;
  }
  .home-pageNum-container {
    position: absolute;
  }

}

.icon-container {
  left: 50%;
  transform: translateX(-50%);
  font-size: 35px;
  color: white;
  cursor: pointer;
  opacity: 0.3;
  &:hover {
    opacity: 1;
  }
}

.homw-arrowUp {
  top: 20px;
  &:hover {
    animation: jump-up 1s infinite;
  }
}

.home-arrowDown {
  bottom: 20px;
  &:hover {
    animation: jump-down 1s infinite;
  }
}

/* 上下跳动效果 */
@keyframes jump-up {
  0% {
    top: 20px;
  }

  50% {
    top: 15px;
  }

  100% {
    top: 20px;
  }
}
@keyframes jump-down {
  0% {
    bottom: 20px;
  }

  50% {
    bottom: 15px;
  }

  100% {
    bottom: 20px;
  }
}

.home-pageNum-container {
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  font-size: 0;

  .pageNum-active {
    background-color: white;
  }

  span {
    display: inline-block;
    margin: 3px 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
  }
}
</style>